<template>
	<!-- 宠物档案 -->
	<scroll-view class="shopListBox" scroll-y style="height: 80vh" @scrolltolower="loadMore">
		<view class="shopListMain">
			<view class="leftList" v-for="(fitem, findex) in noteList" :key="findex">
				<view v-for="(item, index) in fitem" :key="index" class="card">
					<!-- image 是否是图片 1是图片 2不是图片， -->
					<view v-if="item.noteType === 1" class="image-container" :style="{ height: item.height + 'rpx' }"
						@click="goDetail(item)">
						<image :src="item.firstPicture" class="image" mode="widthFix"></image>
						<text class="DirartText">{{ item.noteTitle }}</text>
					</view>
					<view v-else class="video-container" :style="{ height: item.height + 'rpx' }"
						@click="goDetail(item)">
						<image :src="item.firstPicture" class="image"></image>
						<image class="bofangImg" src="/static/my/bofangIcon.png" mode=""></image>
						<text class="DirartText">{{ item.noteTitle }}</text>
					</view>
				</view>
				<view v-if="findex == 1">
					<view class="moreText" v-if="apiLoadingStatus"> 加载中... </view>
					<view class="moreText" v-else-if="hasMore"> 查看更多 > </view>
					<view class="moreText" v-else> 没有更多了 </view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			num: {
				type: Number
			},
			showmore: {
				type: Boolean
			}
		},
		data() {
			return {
				diaryList: [],
				noteList: [
					[],
					[]
				],
				columnHeights: [0, 0], // 新增：记录每列累计高度
				apiLoadingStatus: false,
				page: 1,
				limit: 5, // 新增
				hasMore: true, // 新增
			}
		},
		created() {
			this.getNotes2()
		},
		methods: {
			loadMore() {
				if (!this.apiLoadingStatus && this.hasMore) {
					this.getNotes2();
				}
			},
			goDetail(item) {

				console.log(item);
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						let ddd = {
							hideNavBar: '1',
							hideTotalNavBar: '1',
							hideBottomSafeBar: '1',
							url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/notes/detail/detail?noteId=${item.noteId}&token=${uni.getStorageSync("token")}&userId=${uni.getStorageSync("userId")}`
						}
						let d = JSON.stringify(ddd)
						console.log(d, '都是对的')
						window.AndroidBridge.pushNewWebVC(d);
						console.log('运行Android上');
						break;
					case 'ios':
						window.webkit.messageHandlers.pushNewWebVC.postMessage({
							hideNavBar: '1',
							hideTotalNavBar: '1',
							hideBottomSafeBar: '1',
							url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/notes/detail/detail?noteId=${item.noteId}&token=${uni.getStorageSync("token")}&userId=${uni.getStorageSync("userId")}`
													
						});
						break;
					default:
						console.log('运行在开发者工具上');
						break;
				}

			},
			getNotes2(isReload) {
				if (isReload) {
					this.page = 1;
					this.noteList = [
						[],
						[]
					];
					this.columnHeights = [0, 0]; // 新增：重置高度
					this.hasMore = true;
				}
				if (!this.hasMore) return;

				this.apiLoadingStatus = true;
				const that = this;
				let params = {
					authorId: uni.getStorageSync("userId"),
					followId: uni.getStorageSync("userId"),
					limit: that.limit,
					offset: that.page, // 修正
				};
				uni.app.post('/blog/note/getUpNotes', params, '', '', (res => {
					if (res.code == 2000) {
						let notes = res.data.records || [];
						if (notes.length > 0) {
							for (var i = 0; i < notes.length; i++) {
								// 获取当前卡片高度，默认高度为300（可根据实际情况调整）
								let itemHeight = notes[i].firstPictureHeight || 300;
								let itemWidth = notes[i].firstPictureWidth / 380;
								itemHeight = itemHeight / itemWidth
								// 找到当前高度最小的列
								let minIndex = that.columnHeights[0] <= that.columnHeights[1] ? 0 : 1;
								that.noteList[minIndex].push(notes[i]);
								that.columnHeights[minIndex] += itemHeight;
							}
							that.page++;
							that.hasMore = that.page <= res.data.pages;
						} else {
							that.hasMore = false;
						}
					}
					that.apiLoadingStatus = false;
					if (isReload) {
						uni.stopPullDownRefresh();
					}
				}))
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopListBox {}

	.shopListMain {
		display: flex;
		justify-content: space-between;
	}

	.leftList {
		width: 49%;
	}

	.rightList {
		width: 49%;
	}

	.moreText {
		font-weight: 400;
		font-size: 24rpx;
		color: #c69c6d;
		margin: 60rpx auto 0;
		text-align: center;
	}

	.card {
		width: 100%;
		margin-bottom: 14rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;
	}

	.image-container {
		overflow: hidden;
		position: relative;

		.image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.video-container {
		overflow: hidden;
		position: relative;
	}

	.bofangImg {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 16rpx;
		right: 16rpx;
	}

	.DirartText {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16rpx 26rpx 24rpx;
		background-color: rgba(0, 0, 0, 0.35);
		font-weight: bold;
		font-size: 24rpx;
		color: #ffffff;
	}
</style>